<template>
    <div>
        <div class="container">
            <h1>全部包裹</h1>
            <el-divider></el-divider>
            <div class="handle-box">
                <el-button type="primary" icon="el-icon-search"></el-button>
                <el-select
                    style="margin-left: 10px"
                    v-model="value"
                    @change="select_change"
                    clearable
                    @clear="create_met"
                    placeholder="请选择"
                >
                    <el-option-group v-for="group in options" :key="group.label" :label="group.label">
                        <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-option-group>
                </el-select>

                <el-input placeholder="请输入关键字搜索" v-model="input" style="width: 350px; margin-left: 52%">
                    <el-select v-model="select" slot="prepend" placeholder="请选择" clearable @clear="select_reset" style="width: 100px">
                        <el-option label="快递公司" value="1"></el-option>
                        <el-option label="收件人" value="2"></el-option>
                    </el-select>
                    <el-button slot="append" icon="el-icon-search" @click="search_ExpressInfo"></el-button>
                </el-input>
            </div>
            <!-- :data="tableData.filter((data) => !search1 || data.student_name.toLowerCase().includes(search1.toLowerCase())).slice((currentPage-1)*pagesize,currentPage*pagesize)" -->
            <el-table :data="expressInfo.slice((currentPage - 1) * pagesize, currentPage * pagesize)" stripe style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="发件人:">
                                <span>{{ props.row.from_name }}</span>
                            </el-form-item>
                            <el-form-item label="收件人:">
                                <span>{{ props.row.to_name }}</span>
                            </el-form-item>
                            <el-form-item label="发件人电话:">
                                <span>{{ props.row.from_tel }}</span>
                            </el-form-item>
                            <el-form-item label="收件人电话:">
                                <span>{{ props.row.to_tel }}</span>
                            </el-form-item>
                            <el-form-item label="发件地址:">
                                <span>{{ props.row.from_address }}</span>
                            </el-form-item>

                            <el-form-item label="收件人地址:">
                                <span>{{ props.row.to_address }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                  <el-table-column label="序号" type="index" width="50"> </el-table-column>
                <el-table-column label="快递单号" prop="express_id"> </el-table-column>
                <el-table-column label="快递公司" prop="company_name"> </el-table-column>
                <el-table-column label="创建时间" sortable="" prop="time"> </el-table-column>
                <el-table-column label="状态" prop="state">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.state === 4" type="success">已寄出</el-tag>
                        <el-tag v-if="scope.row.state === 2" type="primary">已出库</el-tag>
                        <el-tag v-if="scope.row.state === 1" type="warning">已入库</el-tag>
                        <el-tag v-if="scope.row.state === 0" type="info">未入库</el-tag>
                        <el-tag v-if="scope.row.state === 5" type="danger">已拒签</el-tag>
                        <el-tag v-if="scope.row.state === 6" type="success">已寄回</el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 15, 30, 45, 60, 75]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="lenth"
                style="margin-left: 35%; margin-top: 20px"
            >
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    // vue名字
    name: 'PackageStranded',
    // 数据
    data() {
        return {
            //总数
            lenth: 0,
            //初始页
            currentPage: 1,
            //初始页大小
            pagesize: 10,
            input: '',
            select: '',
            value: null,
            options: [
                {
                    label: '入库情况',
                    options: [
                        {
                            value: 0,
                            label: '未入库'
                        },
                        {
                            value: 1,
                            label: '已入库'
                        }
                    ]
                },
                {
                    label: '在库情况',
                    options: [
                        {
                            value: 5,
                            label: '已拒签'
                        },
                        {
                            value: 6,
                            label: '已寄回'
                        },
                        {
                            value: 4,
                            label: '已寄出'
                        }
                    ]
                },
                {
                    label: '出库情况',
                    options: [
                        {
                            value: 2,
                            label: '已出库'
                        }
                    ]
                }
            ],
            param: {
                to_name: ''
            },
            expressInfo: []
        };
    },
    // 方法
    methods: {
        // 当前页大小
        handleSizeChange(val) {
            this.pagesize = val;
        },
        // 当前页
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        select_reset() {
            if (this.select === '1' || this.select === '2') {
            } else {
                this.input = null;
                this.create_met();
            }
        },
        search_ExpressInfo() {
            console.log(this.select);
            if (this.select === '1' || this.select === '2') {
                console.log(this.input);
                if (this.input !== null && this.input !== undefined && this.input !== '') {
                    let param = new URLSearchParams();
                    param.append('input', this.input);
                    const _this = this;
                    this.$axios({
                        method: 'POST',
                        url: 'express/findAllExpressInfo',
                        data: param,
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
                    })
                        .then(function (res) {
                            console.log(res);
                            if (res.data.code == 1) {
                                _this.expressInfo = res.data.result;
                                _this.lenth = _this.expressInfo.length;
                            } else {
                                _this.expressInfo = null;
                                _this.$message('暂时没有该分类下的快递信息！');
                            }
                        })
                        .catch(function (err) {
                            console.log(err);
                        });
                } else {
                    const h = this.$createElement;
                    this.$notify({
                        title: '输入的内容出错',
                        message: h('i', { style: 'color: teal' }, '请输入正确的查询条件')
                    });
                }
            } else {
                const h = this.$createElement;

                this.$notify({
                    title: '选择条件出错',
                    message: h('i', { style: 'color: teal' }, '请选择要查询的条件')
                });
            }
        },

        select_change() {
            console.log(this.value);
            let param = new URLSearchParams();
            param.append('state', this.value);
            const _this = this;
            this.$axios({
                method: 'POST',
                url: 'express/getExpressInfo',
                data: param,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
            })
                .then(function (res) {
                    console.log(res);
                    if (res.data.code == 1) {
                        _this.expressInfo = res.data.result;
                        _this.lenth = _this.expressInfo.length;
                    } else {
                        _this.expressInfo = [];
                        _this.$message('暂时没有该分类下的快递信息！');
                    }
                })
                .catch(function (err) {
                    console.log(err);
                });
        },

        create_met() {
            const _this = this;
            this.$axios({
                method: 'POST',
                url: 'express/findAllExpressInfo',
                // data: param,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
            })
                .then(function (res) {
                    console.log(res);
                    if (res.data.code == 1) {
                        _this.expressInfo = res.data.result;
                        _this.lenth = _this.expressInfo.length;
                    } else {
                        // _this.$message.err('删除失败！');
                        // _this.$message.
                    }
                })
                .catch(function (err) {
                    console.log(err);
                });
        }
    },

    // 页面初始化生命周期函数
    created() {
        this.create_met();
    }
};
</script>
// 样式
<style scoped>
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
.handle-box {
    margin-bottom: 20px;
}
</style>